<template>
    <div>
        <b-card>
            <el-button type="primary" size="small" class="mb-4" @click="addTab(editableTabsValue)">新单</el-button>
            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name" :closable="item.closable">
                    {{item.content}}
                </el-tab-pane>
            </el-tabs>
        </b-card>

    </div>
</template>

<style scoped>
</style>

<script>
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import DetectForm from "./DetectForm";

Vue.use(ElementUI);

export default {
    name: "DetectionForm",
    components: {
        "detect-from": DetectForm
    },
    data() {
        return {
            editableTabsValue: "1",
            editableTabs: [
                {
                    title: "Tab 1",
                    name: "1",
                    content: "Tab 1 content",
                    closable: false
                }
            ],
            tabIndex: 1
        };
    },
    methods: {
        addTab(targetName) {
            let newTabName = ++this.tabIndex + "";
            this.editableTabs.push({
                title: "New Tab",
                name: newTabName,
                content: "New Tab content"
            });
            this.editableTabsValue = newTabName;
        },
        removeTab(targetName) {
            let tabs = this.editableTabs;
            let activeName = this.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }

            this.editableTabsValue = activeName;
            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
    }
};
</script>
